<template>
	<view class="wanlshop-container">
		<view v-if="common.modulesData.homeModules.page" class="wanlshop-container__head" :style="{
				height: headHeight + 'px',
				color: common.modulesData.homeModules.page ? common.modulesData.homeModules.page.style.navigationBarTextStyle == '#ffffff' ? '#ffffff' : '#333333' : '',
				backgroundColor: common.modulesData.homeModules.page ? common.modulesData.homeModules.page.style.navigationBarBackgroundColor : '#f7f7f7',
				backgroundImage: 'url(' + $wanlshop.oss( common.modulesData.homeModules.page ? common.modulesData.homeModules.page.style.navigationBackgroundImage : '', 0, 50, 1, 'transparent', 'png' ) + ')'
			}">
			<view :style="{ height: headHeight + 'px', paddingTop: headTop + 'px' }">
				<view class="navigater flex align-center justify-between">
					<view class="flex" @tap="scanCode">
						<view class="text-xxl"><text class="wlIcon-saoyisao"></text></view>
					</view>
					<view class="search flex align-center margin-lr-sm round">
						<view class="icon text-df text-bold wanl-gray-dark">
							<text class="wlIcon-sousuo1"></text>
						</view>
						<swiper vertical autoplay circular interval="3000">
							<swiper-item @tap="handleSearch('')">
								<text class="wanl-gray-dark text-cut">搜索 商品、类目</text>
							</swiper-item>
							<swiper-item v-for="(item, index) in common.modulesData.searchModules" :key="item.keywords"
								@tap="handleSearch(item.keywords)">
								<text class="wanl-gray-dark text-cut">{{ item.keywords }}</text>
							</swiper-item>
						</swiper>
					</view>
					<view class="flex">
						<!-- <view class="margin-right-bj text-xxl position-relative" @tap="$wanlshop.to('/pages/user/coupon/list')">
							<text class="wlIcon-coupon"/>
							<view class="cu-tag badge">减</view>
						</view> -->
						<view class="margin-right-bj text-xxl position-relative" @tap="handleModal('share')">
							<text class="wlIcon-fenxiangcopy" />
						</view>

						<view class="text-xxl" @tap="$wanlshop.to('/pages/notice/notice')">
							<text class="wlIcon-xiaoxizhongxin"></text>
						</view>
					</view>
				</view>
				<view class="toolbar flex padding-lr-bj align-center">
					<scroll-view class="scroll" scroll-x scroll-with-animation :scroll-left="scrollLeft">
						<view class="scroll__item" :class="{ action: currentItemId === 'putong' }"
							@tap="handleSelect('putong', 0)">
							生活区
						</view>
						<view class="scroll__item" :class="{ action: currentItemId === 'fuhua' }"
							@tap="handleSelect('fuhua', 1)">
							孵化区
						</view>
						<view class="scroll__item" :class="{ action: currentItemId === 'jifen' }"
							@tap="handleSelect('jifen', 2)">
							积分区
						</view>
						<!-- <view class="scroll__item" v-for="(item, index) in common.modulesData.categoryModules" :key="item.id" :class="{ action: currentItemId === 'cid' + item.id }" @tap="handleSelect('cid' + item.id, index + 2)" >
							{{ item.name }}
						</view> -->
					</scroll-view>
					<!-- <view class="category flex align-center" @tap="handleModal('category')">
						<text v-if="modalName == 'category'" class="wlIcon-fanhui3"></text>
						<text v-else class="wlIcon-fanhui4"></text>
					</view> -->
				</view>
			</view>
		</view>
		<!-- 主体 -->
		<swiper class="wanlshop-container__main" :current-item-id="currentItemId" :style="{
				height: windowHeight + 'px'
			}" @change="changeCurrent" @animationfinish="animationFinish">
			<!-- 发现页 -->
			<!-- 	<swiper-item item-id="follow">
				<wanl-shop-find
					:windowHeight="windowHeight"
					:headHeight="headHeight"
					:currentItemId="currentItemId"
					:homeModules="common.modulesData.homeModules"
					:appConfig="common.appConfig"
					:user="user"
				/>
			</swiper-item> -->
			<!-- 主页 -->
			<swiper-item>
				<wanl-shop-page ref="upgoods" :windowHeight="windowHeight" :headHeight="headHeight" :headTop="headTop"
					:pageModules="common.modulesData.homeModules" :adData="common.adData" />
				<!-- 商品内容模块 -->
			</swiper-item>
			<!-- 分类 -->
			<!-- <swiper-item
				v-for="(item, index) in common.modulesData.categoryModules"
				:key="item.id"
				:item-id="'cid' + item.id"
			>
				<wanl-shop-category
					:cid="item.id"
					:headHeight="headHeight"
					:windowHeight="windowHeight"
					:currentItemId="currentItemId"
					:homeModules="common.modulesData.homeModules"
					:childlist="item.childlist"
				/>
			</swiper-item> -->
		</swiper>
		<!-- 弹窗 -->
		<view class="WANL-MODAL" @touchmove.stop.prevent="moveHandle">
			<!-- 顶部 -->
			<view class="cu-modal top-modal" :class="modalName == 'category' ? 'show' : ''" @tap="handleModal()">
				<view class="cu-dialog padding-lr-bj padding-bottom-bj" :style="{ paddingTop: headHeight + 12 + 'px' }"
					@tap.stop="">
					<view class="category text-min">
						<!-- <view
							class="item round bg-gray"
							:class="{ action: currentItemId === 'follow' }"
							@tap="handleSelect('follow', 0)"
						>
							我的关注
						</view> -->
						<view class="item round bg-gray" :class="{ action: currentItemId === 'home' }"
							@tap="handleSelect('putong', 1)">
							主页
						</view>
						<!-- <view class="item round bg-gray" v-for="(item, index) in common.modulesData.categoryModules"
							:key="item.id" :class="{ action: currentItemId === 'cid' + item.id }"
							@tap="handleSelect('cid' + item.id, index + 2)">
							{{ item.name }}
						</view> -->
					</view>
				</view>
			</view>


			<!-- 分享 -->
			<view class="cu-modal wanl-share bottom-modal" :class="modalName == 'share' ? 'show' : ''"
				@tap="handleModal()">
				<view class="cu-dialog" @tap.stop="">
					<wanl-share ref="wanlShare" page="pages/index" :scene="{qr:'i'}" :scrollAnimation="scrollAnimation"
						@change="handleModal" />
				</view>
			</view>

			<!-- 版本更新 -->
			<view class="cu-modal" :class="{ show: update.update }">
				<view class="cu-dialog">
					<view class="hade">
						<image :src="$wanlshop.appstc('/common/update.png')" mode="aspectFit"></image>
						<view class="title">
							<view class="text-white text-bold5">{{ update.data.title }}</view>
							<text class="text-white text-bold5">
								最新版本：{{ update.data.versionName }}
							</text>
						</view>
					</view>

					<view class="info">
						<view class="text-lg text-bold5"><text>更新内容：</text></view>
						<rich-text class="wanl-gray-dark" :nodes="update.data.content" />
						<!-- 开始下载 -->
						<view class="margin-top-xl" v-if="update.download.start">
							<view class="flex margin-bottom-sm">
								<view class="cu-progress round striped active">
									<view class="bg-orange" :style="{ width: update.download.progress + '%' }"></view>
								</view>
								<text class="margin-left-sm">{{ update.download.progress }}%</text>
							</view>
							<view class="wanl-gray-dark text-sm text-center">
								<text>
									下载中，请稍等（{{
										$wanlshop.conver(update.download.totalBytesWritten)
									}}/{{
										$wanlshop.conver(update.download.totalBytesExpectedToWrite)
									}}）
								</text>
							</view>
						</view>
						<!-- 开始安装 -->
						<view class="margin-top-xl text-center" v-else-if="update.download.install">
							安装中...
						</view>
						<!-- 更新提示 -->
						<view class="flex justify-around margin-top-xl" v-else>
							<button class="cu-btn radius-bock bg-gray lg" @tap="ignore">
								忽略升级
							</button>
							<button class="cu-btn radius-bock bg-blue lg" @tap="download">
								立刻升级
							</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	import wanlShopPage from '@/components/wanl-shop/page';
	import wanlShopFind from '@/components/wanl-shop/find';
	import wanlShopCategory from '@/components/wanl-shop/category';

	export default {
		components: {
			wanlShopPage,
			wanlShopFind,
			wanlShopCategory
		},
		computed: {
			...mapState(['common', 'user', 'update'])
		},
		data() {
			return {
				modalName: '',
				scrollAnimation: 300,
				headHeight: 75,
				windowHeight: 0,
				headTop: 0,
				currentItemId: 'home',
				currentData: {},
				scrollLeft: 0,
				contentText: {
					contentdown: '下拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '我是有底线的'
				},
				goodstype: '1',
			};
		},
		onShow() {
			// #ifdef APP-PLUS
			plus.navigator.setFullscreen(false);
			// #endif
			// 计算页面尺寸
			let sys = this.$wanlshop.wanlsys();
			this.headTop = sys.top;
			this.headHeight = sys.height + uni.upx2px(60);
			this.windowHeight = sys.windowHeight;
			setTimeout(() => {
				uni.setNavigationBarColor({
					frontColor: this.$store.state.common.modulesData.homeModules.page ?
						this.$store.state.common.modulesData.homeModules.page.style
						.navigationBarTextStyle : '',
					backgroundColor: this.$store.state.common.modulesData.homeModules.page ?
						this.$store.state.common.modulesData.homeModules.page.style
						.navigationBarBackgroundColor : ''
				});
			}, 200);
			console.log(this.common, '89999999999999999999', this.headHeight, this.windowHeight)
		},
		onReady() {
			// 判断网络类型
			uni.getNetworkType({
				success: res => {
					if (res.networkType == '2g' || res.networkType == '3g' || res.networkType == '4g') {
						this.$wanlshop.msg('当前使用非WIFI环境，请注意流量使用');
					} else if (res.networkType == 'none') {
						this.$wanlshop.msg('没有网络');
					}
				}
			});
		},
		onLoad(query) {
			// 判断是否小程序来源
			if (query.hasOwnProperty('scene')) {
				let scene = decodeURIComponent(query.scene);
				scene = this.$wanlshop.getParam(scene);
				console.log('微信小程序：', scene);
			}
		},
		methods: {
			...mapActions({
				download: 'update/download', // 立即下载
				ignore: 'update/ignore' // 忽略更新
			}),
			// 选择Tag
			handleSelect(id, index) {
				this.currentItemId = id;
				if (this.currentItemId == 'putong' || this.currentItemId == 'fuhua' || this.currentItemId == 'jifen') {
					this.goodstype = this.currentItemId == 'putong' ? '1' : this.currentItemId == 'fuhua' ? '2' : this
						.currentItemId == 'jifen' ? '3' : '1'
					// console.log(this.goodstype,'8999999')
					this.$refs.upgoods.updatagoods(this.goodstype) //更新喜欢的区域订单
				}
				// this.scrollLeft = (index - 1) * 50;

			},
			// 动画
			animationFinish(e) {
				//#ifdef APP-PLUS
				this.changeCurrent(e);
				//#endif
			},
			// 滚动的tag
			changeCurrent(e) {
				this.currentItemId = e.detail.currentItemId;
				this.scrollLeft = (e.detail.current - 1) * 50;
			},
			// 弹出层
			handleModal(name) {
				// 滚动分享
				if (name == 'share') {
					setTimeout(() => {
						this.scrollAnimation = 0;
					}, 300);
				}
				// 强制关闭海报
				if (this.modalName == 'share') {
					this.$refs.wanlShare.closePoster();
				}
				this.modalName = this.modalName ? null : name;
			},
			// 扫码
			scanCode() {
				// #ifndef H5
				uni.scanCode({
					success: res => {
						let query = this.$wanlshop.getParam(res.result),
							id = query.id;
						switch (query.qr) {
							case 'g':
								this.onGoods(id);
								break;
							case 'gr':
								this.$wanlshop.to(
									`/pages/apps/groups/goods?id=${id}&groups_id=${query.groups_id}`);
								break;
							case 'u':
								this.$wanlshop.to(`/pages/user/info?id=${id}`);
								break;
							case 'fu':
								this.$wanlshop.to(`/pages/apps/find/user?id=${id}`);
								break;
							case 'c':
								this.$wanlshop.on('/pages/category');
								break;
							case 'p':
								this.$wanlshop.to(`/pages/page/index?id=${id}`);
								break;
							case 's':
								this.onShop(id);
								break;
							case 'live':
								// #ifdef APP-PLUS || MP-WEIXIN
								this.$wanlshop.auth(`/pages/shop/live/live`);
								// #endif
								// #ifndef APP-PLUS || MP-WEIXIN
								this.$wanlshop.msg('目前只开放App和微信小程序直播');
								// #endif
								break;
							case 'chat':
								this.toChat(id);
								break;
						}
					}
				});
				// #endif
				// #ifdef H5
				this.$wanlshop.msg('暂不支持H5扫码');
				// #endif
			},
			// 搜索
			handleSearch(text) {
				this.$wanlshop.to(`/pages/page/search?type=goods&keywords=${text}`, 'fade-in', 100);
			},
			//禁止父元素滑动 1.0.3升级
			moveHandle() {}
		}
	};
</script>

<style lang="scss">
	.wanlshop-container {
		&__head {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 999;
			background-size: 100% auto;
			background-repeat: no-repeat;

			.navigater {
				height: 86rpx;
				padding-left: 25rpx;
				padding-right: 25rpx;
				/* #ifdef MP */
				padding-right: 200rpx;

				/* #endif */
				.search {
					flex: 1;
					background-color: #fff;
					height: 66rpx;
					border: 2rpx solid #fff;

					.icon {
						margin: 0 20rpx;
					}

					swiper {
						height: 100%;
						width: 100%;
						margin-right: 10rpx;

						swiper-item {
							display: flex;
							align-items: center;
						}
					}
				}
			}

			.toolbar {
				.scroll {
					flex: 1;
					white-space: nowrap;
					overflow: hidden;
					width: 100%;

					&__item {
						position: relative;
						z-index: 2;
						font-size: 28rpx;
						display: inline-flex;
						height: 58rpx;
						align-items: center;
						margin-right: 40rpx;

						&.action {
							position: relative;
							font-weight: bold;
							font-size: 30rpx;

							&::after {
								content: ' ';
								position: absolute;
								bottom: 0;
								left: 50%;
								transform: translateX(-50%);
								height: 4rpx;
								width: 30rpx;
								border-radius: 6rpx;
								background-color: #fff;
							}
						}
					}
				}

				.category {
					box-shadow: #eee -16rpx 0 16rpx -16rpx;
					height: 58rpx;
					font-size: 28rpx;
					padding-left: 25rpx;
				}
			}
		}

		&__main {
			position: relative;
			z-index: 99;
		}

		.WANL-MODAL {
			.cu-modal {
				&.top-modal {
					background: rgba(0, 0, 0, 0.6);
					text-align: inherit;

					.cu-dialog {
						background: #fff;
						border-radius: 0 0 18rpx 18rpx;

						.category {
							display: grid;
							grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
							grid-auto-flow: row dense;
							grid-gap: 16rpx;

							.item {
								display: flex;
								align-items: center;
								justify-content: center;
								padding: 12rpx 0;
								border: 2rpx solid transparent;

								&.action {
									background-color: transparent;
									border-color: #f40;
									color: #f40;
									font-weight: bold;
								}
							}
						}
					}
				}
			}
		}
	}
</style>